<template>
  <div class="feedback-container">
    <div class="common-card damConfigForm">
      <el-form ref="ruleForm" :model="form" label-width="180px" :readonly="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="标题:" prop="title">
              {{ form.title }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别:" prop="type">
              {{ form.type }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内容:" prop="factory">
              {{ form.detail }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="actionBox">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>
    <div class="message-container">
      <div v-for="(message, index) in messages" :key="index" :class="message.role + '-message'">
        <div v-if="message.role === 'user'" class="user-message right">{{ message.createTime }} 你：{{ message.detail }}
        </div>
        <div v-else class="other-message">{{ message.createTime }} 用户({{ message.accountNo }}) ：{{ message.detail }}</div>
      </div>
    </div>
    <div class="input-container">
      <input type="text" v-model="userInput" @keyup.enter="sendMessage" placeholder="输入你的回复...">
      <button @click="sendMessage">回复</button>
    </div>
  </div>

</template>

<script>
import {
  getFeedbackDetailById,
  updateFeedback,
  addFeedback,
addFeedBackDetail,
} from "@/api/feedback";

export default {
  data() {
    return {
      picUrl: "",
      picFile: null,
      form: {},
      userInput: '',
      messages: [],
      message: {}
    };
  },
  computed: {
    isEdit() {
      if (this.$route.params && this.$route.params.id) {
        return true;
      }
      return false;
    },
    id() {
      return this.$route.params && this.$route.params.id;
    },
  },
  created() {
    if (this.isEdit) {
      getFeedbackDetailById(this.id).then((res) => {
        this.form = res;
        res.details.forEach(element => {
          if(element.createId == localStorage.getItem('id')){
            this.messages.push({ detail: element.detail, role: 'user' , createTime: element.createTime, accountNo : element.accountNo});
          }else {
            this.messages.push({ detail: element.detail, role: 'other' , createTime: element.createTime, accountNo : element.accountNo});
          }
        });
      });
    }
  },
  mounted() { },
  methods: {
    sendMessage() {
      if (this.userInput.trim() !== '') {
        //保存回复历史到后端
        this.reply(this.userInput);
        //this.userInput = '';
      }
    },
    reply(userInput) {
      this.message.commentId = this.id;
      this.message.detail = userInput;
      addFeedBackDetail(this.message).then(res =>{
        if (res) {
                this.$message.success("回复反馈成功");
                this.messages.push({ detail: this.userInput, role: 'user' });
                this.userInput = '';
              } else {
                this.$message.error("回复反馈失败");
              }
      });
      // 调用接口 保存回复
        
      },
    handleSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateFeedback(this.form).then((res) => {
              if (res) {
                this.$message.success("编辑反馈成功");
                this.handleCancel();
              } else {
                this.$message.error("编辑反馈失败");
              }
            });
          } else {
            addFeedback(this.form).then((res) => {
              if (res) {
                this.$message.success("新增反馈成功");
                this.handleCancel();
              } else {
                this.$message.error("新增反馈失败");
              }
            });
          }
        }
      });
    },
    handleInput(value) {
      this.form.guaranteePeriod = value.replace(/^(0+)|[^\d]+/g, "");
    },
    handleCancel() {
      this.$router.push({
        name: "FeedbackList",
      });
    },
    handleUpload() {
      this.$refs.fileRef.click();
    },
  },
};
</script>

<style lang="scss" scoped>
.feedback-container {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  height: 100%;
  justify-content: center;
}

.message-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.input-container {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.user-message {
  flex: 1;
  background-color: #007bff;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin: 2px;
}

.right {
  margin-left: auto;
  text-align: right;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}


.other-message {
  flex: 1;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

.damConfigForm {
  padding: 40px;

  .title {
    font-size: 20px;
    font-weight: 800;
  }

  .actionBox {
    display: flex;
    justify-content: center;
  }
}

.uploadArea {
  height: 200px;
  background-color: #ccc;
  cursor: pointer;
  border-radius: 4px;

  .iconBox {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .previewImg {
    height: 100%;
    width: 100%;
  }

  .uploadBtn {
    display: none;
  }

  .icon {
    font-size: 80px;
    color: #888;
  }
}
</style>